<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据列表页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <link rel="stylesheet" href="../css/page/dataList.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/font/iconfont.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/echarts.min.js"></script>
    <script src="../layui/layui.js"></script>
</head>
<body>
<div class="wrap">
    <!--头部-->
    <div class="header_wrap">
        <header>
            <!--导航栏-->
            <div class="header_nav">
                <ul class="nav_list">
                    <li class="indexDefault">首页</li>
                    <li>数据库</li>
                    <li>干部画像</li>
                    <li>政策发文</li>
                    <li>大数据统计</li>
                    <li>人才地图</li>
                    <li>统计参考</li>
                    <li>动态信息</li>
                    <li>历史数据库</li>
                </ul>
            </div>
            <!--用户登录-->
            <div class="header_login">
                <ul>
                    <li>李明</li>
                    <li>
                        <button>退出</button>
                    </li>
                </ul>
            </div>
        </header>
        <!--搜索信息-->
        <div class="header_search">
            <p class="search_word">新华人才网</p>
            <div class="search">
                <div class="search_wrap">
                    <span class="all">全部</span>
                    <i class="iconfont icon-xiala-"></i>
                    <i class="iconfont icon-vertical_line"></i>
                    <input type="text" placeholder="">
                    <i class="iconfont icon-sousuo-copy"></i>
                </div>
                <div class="host_search">
                    <span>热门推荐：</span><span>大幅度</span><span></span><span>发多少</span><span>发多少反</span></div>
            </div>
        </div>
    </div>
    <!--主体内容-->
    <main>
        <div class="main_list">
            <!--按职职称检索-->
            <div class="list_type">
                <div class="list_type_title">
                    <p>
                        <i class="iconfont icon-vertical_line"></i>
                        <span>人员库分类</span>
                    </p>
                </div>
            </div>
            <!--人员库分类-->
            <div class="list_type_talent">
                <ul>
                    <li style="background:#1E9FFF;color: #fff">在职人员库</li>
                    <li>退休人员库</li>
                    <li>调转人员库</li>
                    <li>企业人员库</li>
                    <li>外语干部库</li>
                    <li>专家人才库</li>
                    <li>外籍专家库</li>
                    <li>外籍员工库</li>
                    <li>全部员工库</li>
                </ul>
            </div>
            <!--按条件检索-->
            <div class="list_type">
                <div class="list_type_title">
                    <p>
                        <i class="iconfont icon-vertical_line"></i>
                        <span>按条件检索</span>
                    </p>
                </div>
            </div>

            <div class="comment">
                <i class="iconfont icon-rrenyuanguanli-"></i>
                <div class="comment_list">
                    <div class="ul">
                        <div class="funational_type">
                            <span class="type_color">机构类型</span>
                            <p class="type_chose"><span>不限</span><span>总社</span><span>内设机构</span><span>直属事业</span><span>直属事业下属企业</span></p>
                            <p class="contray"><span>国内分社</span><span>华北</span><span>东北</span><span>华东</span><span>中南</span></p>
                        </div>
                        <div class="conment_type">
                            <span class="type_color">部门</span>
                            <p class="type_chose"><span>不限</span><span>办公厅</span><span>总编室</span><span>国内新闻编辑部</span><span>国际新闻编辑部</span><span>对外新闻编辑部</span><span>参考新闻编辑部</span><span>新闻摄影编辑部</span><span class="more">更多  <i class="iconfont icon-xiala-"></i></span></p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="sex_gallary">
                <p class="sexandgallary"><i class="iconfont icon-sousuo-copy"></i><span>性别</span><span>不限</span><span>男</span><span>女</span></p>
                <p class="sexandgallary"><i class="iconfont icon-sousuo-copy"></i><span>学历</span><span>不限</span><span>博士</span><span>学士</span><span>双学士</span><span>大学</span><span>其他</span></p>
            </div>

            <div class="age">
                <p class="age_limit"><i class="iconfont icon-sousuo-copy"></i><span>性别</span><span>不限</span><span>30岁以下</span><span>31-40</span><span>41-50</span><span>51-60</span><span>60岁以上</span><span class="more">自定义<i class="iconfont icon-jiantou"></i></span></p>
            </div>
        </div>
        <div class="more_chose"><span>更多筛选条件 <i class="iconfont icon-xiala-"></i></span></div>
    </main>

    <main class="mains">
        <div class="mains_wrap">
            <div class="main_title">
                <div class="title_left">
                    <span class="contion">检索条件：</span>
                    <ul>
                        <li><span>人员库分类：</span><span>在职员工库</span></li>
                        <li><span>机构类型：</span><span class="inner_color">内设机构</span><span>X</span></li>
                        <li><span>机构类型：</span><span class="inner_color">内设机构</span><span>X</span></li>
                    </ul>
                </div>
                <div class="title_right">共检索到<span>51</span>条结果</div>
            </div>
            <div class="mains_content">
                <div class="mains_content_left">
                    <div class="person_list">
                        <img src="../img/img.jpg" alt="">
                        <div class="person_infor">
                            <p><span class="person_name">姓名</span><span class="name_call">办公室主任</span></p>
                            <p class="person_address"><span>人事局</span><span>办公室</span></p>
                            <p><i class="iconfont icon-tel"></i><span>18888888888</span></p>
                            <p><i class="iconfont icon-dianhua"></i><span>00000000</span></p>
                        </div>
                    </div>
                    <div class="person_list">
                        <img src="../img/img.jpg" alt="">
                        <div class="person_infor">
                            <p><span class="person_name">姓名</span><span class="name_call">办公室主任</span></p>
                            <p class="person_address"><span>人事局</span><span>办公室</span></p>
                            <p><i class="iconfont icon-tel"></i><span>18888888888</span></p>
                            <p><i class="iconfont icon-dianhua"></i><span>00000000</span></p>
                        </div>
                    </div>
                    <div class="person_list">
                    <img src="../img/img.jpg" alt="">
                    <div class="person_infor">
                        <p><span class="person_name">姓名</span><span class="name_call">办公室主任</span></p>
                        <p class="person_address"><span>人事局</span><span>办公室</span></p>
                        <p><i class="iconfont icon-tel"></i><span>18888888888</span></p>
                        <p><i class="iconfont icon-dianhua"></i><span>00000000</span></p>
                    </div>
                </div>
                </div>
                <div class="mains_content_right">
                    <div class="right_top">
                        <div class="per_infor">
                            <p><span>姓名</span><span>人事局</span><span>办公室</span><span>办公室主任</span><button>后备干部</button><button>调转人员</button></p>
                            <p><button class="right_button"><i class="iconfont icon-tel"></i>干部画像</button></p>
                        </div>
                        <div class="per_detial">
                            <p><span>出生日期：2018-10-19</span><span>性别：女</span><span>出生地：北京</span></p>
                            <p><span>政治面貌：中国党员</span><span>参加工作：2018-10-19</span><span>学历：大学硕士</span></p>
                            <p><span>毕业院校：北京大学</span><span>专业：经济管理</span><span>专业资格：高级</span></p>
                        </div>
                    </div>
                    <div class="right_down">
                        <div class="layui-tab">
                            <ul class="layui-tab-title">
                                <li class="layui-this">网站设置</li>
                                <li>工作人员登记表</li>
                                <li>大信息</li>
                                <li>配置信息库1</li>
                                <li>配置信息库2</li>
                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">内容1</div>
                                <div class="layui-tab-item">内容2</div>
                                <div class="layui-tab-item">内容3</div>
                                <div class="layui-tab-item">内容4</div>
                                <div class="layui-tab-item">内容5</div>
                            </div>
                        </div>
                    </div>
                    <div class="right_bottom">
                        <p class="offer_user"><i class="iconfont icon-vertical_line"></i><span>常用表格下载</span></p>
                        <ul class="login_list">
                            <li>工作人员登记表</li>
                            <li>工作人员登记表</li>
                            <li>工作人员登记表</li>
                            <li>工作人员登记表</li>
                            <li>工作人员登记表</li>

                            <li>工作人员登记表</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <div class="footer">
            <div class="footer_top_wrap">
                <div class="footer_top">
                    <ul>
                        <li>相关链接</li>
                    </ul>
                    <ul>
                        <li>社党组巡视工作信息公开</li>
                        <li>国家高端智库</li>
                        <li>产品研究院</li>
                    </ul>
                    <ul>
                        <li>新华党建网</li>
                        <li>新闻业务</li>
                        <li>经营管理业务</li>
                    </ul>
                    <ul>
                        <li>经营管理业务</li>
                        <li>语文专线报道</li>
                        <li>老年生活</li>
                    </ul>
                    <ul>
                        <li>常用软件下载</li>
                        <li>登记表下载</li>
                    </ul>
                </div>
            </div>
            <div class="footer_down_wrap">
                <div class="footer_down">
                    <ul class="footer_logo">
                        <li>
                            <img src="../img/timg.jpg" alt="">
                            <p>新华社办公信息系统</p>
                        </li>
                    </ul>
                    <i class="iconfont icon-vertical_line"></i>

                    <ul class="footer_eyes">
                        <li><img src="../img/timg.jpg" alt=""><p><span>移动办公平台</span>下载</p></li>
                    </ul>
                    <ul>
                        <li>技术值班电话:010-8888888</li>
                    </ul>
                    <ul>
                        <li>制作单位:新华社技术局</li>
                    </ul>
                    <ul>
                        <li>copyrigh(C)2016版权所有</li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
</div>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;
        //获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
        var layid = location.hash.replace(/^#test1=/, '');
        element.tabChange('test1', layid); //假设当前地址为：http://a.com#test1=222，那么选项卡会自动切换到“发送消息”这一项

        //监听Tab切换，以改变地址hash值
        element.on('tab(test1)', function(){
            location.hash = 'test1='+ this.getAttribute('lay-id');
        });
    });

</script>
</body>
</html>